<template>
  <!-- <div class="order-submission">
    <div
      class="allAddress"
      :style="store_self_mention ? '' : 'padding-top: 0.2rem'"
    >
      <div class="nav acea-row">
        <div
          class="item font-color-red"
          :class="shipping_type === 0 ? 'on' : 'on2'"
          @click="addressType(0)"
          v-if="store_self_mention"
        ></div>
        <div
          class="item font-color-red"
          :class="shipping_type === 1 ? 'on' : 'on2'"
          @click="addressType(1)"
          v-if="store_self_mention"
        ></div>
      </div>
      <div
        class="address acea-row row-between-wrapper"
        v-if="shipping_type === 0"
        @click="addressTap"
      >
        <div class="addressCon" v-if="addressInfo.real_name">
          <div class="name">
            {{ addressInfo.real_name }}
            <span class="phone">{{ addressInfo.phone }}</span>
          </div>
          <div>
            <span class="default font-color-red" v-if="addressInfo.is_default"
              >[默认]</span
            >
            {{ addressInfo.province }}{{ addressInfo.city
            }}{{ addressInfo.district }}{{ addressInfo.detail }}
          </div>
        </div>
        <div class="addressCon" v-else>
          <div class="setaddress">设置收货地址</div>
        </div>
        <div class="iconfont icon-jiantou"></div>
      </div>
      <div class="address acea-row row-between-wrapper" v-else>
        <div class="addressCon">
          <div class="name">
            {{ system_store.name }}
            <span class="phone">{{ system_store.phone }}</span>
          </div>
          <div>
            {{ system_store._detailed_address }}
          </div>
        </div>
      </div>
      <div class="line">
        <img src="@assets/images/line.jpg" />
      </div>
    </div>
    <OrderGoods :evaluate="0" :cartInfo="orderGroupInfo.cartInfo"></OrderGoods>
    <div class="wrapper">
      <div
        class="item acea-row row-between-wrapper"
        @click="couponTap"
        v-if="deduction === false"
      >
        <div>优惠券</div>
        <div class="discount">
          {{ usableCoupon.coupon_title || "请选择" }}
          <span class="iconfont icon-jiantou"></span>
        </div>
      </div>
      <div class="item acea-row row-between-wrapper" v-if="deduction === false">
        <div>积分抵扣</div>
        <div class="discount">
          <div class="select-btn">
            <div class="checkbox-wrapper">
              <label class="well-check">
                <input type="checkbox" v-model="useIntegral" />
                <i class="icon"></i>
                <span class="integral">
                  当前积分
                  <span class="num font-color-red">
                    {{ userInfo.integral || 0 }}
                  </span>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div
        class="item acea-row row-between-wrapper"
        v-if="
          orderGroupInfo.priceGroup.vipPrice > 0 &&
            userInfo.vip &&
            pinkId == 0 &&
            orderGroupInfo.bargain_id == 0 &&
            orderGroupInfo.combination_id == 0 &&
            orderGroupInfo.seckill_id == 0
        "
      >
        会员优惠
        <div class="discount">￥{{ orderGroupInfo.priceGroup.vipPrice }}</div>
      </div>
      <div class="item acea-row row-between-wrapper" v-if="shipping_type === 0">
        <div>快递费用</div>
        <div class="discount">
          {{
            orderGroupInfo.priceGroup.storePostage > 0
              ? orderGroupInfo.priceGroup.storePostage
              : "免运费"
          }}
        </div>
      </div>
      <div v-else>
        <div class="item acea-row row-between-wrapper">
          <div>联系人</div>
          <div class="discount">
            <input
              type="text"
              placeholder="请填写您的联系姓名"
              v-model="contacts"
            />
          </div>
        </div>
        <div class="item acea-row row-between-wrapper">
          <div>联系电话</div>
          <div class="discount">
            <input
              type="text"
              placeholder="请填写您的联系电话"
              v-model="contactsTel"
            />
          </div>
        </div>
      </div>
      <div class="item">
        <div>备注信息</div>
        <textarea
          placeholder="请添加备注（150字以内）"
          v-model="mark"
        ></textarea>
      </div>
    </div>
    <div class="wrapper">
      <div class="item">
        <div>支付方式</div>
        <div class="list">
          <div
            class="payItem acea-row row-middle"
            :class="active === 'weixin' ? 'on' : ''"
            @click="payItem('weixin')"
            v-show="isWeixin"
          >
            <div class="name acea-row row-center-wrapper">
              <div
                class="iconfont icon-weixin2"
                :class="active === 'weixin' ? 'bounceIn' : ''"
              ></div>
              微信支付
            </div>
            <div class="tip">微信快捷支付</div>
          </div>
          <div
            class="payItem acea-row row-middle"
            :class="active === 'weixin' ? 'on' : ''"
            @click="payItem('weixin')"
            v-show="!isWeixin"
          >
            <div class="name acea-row row-center-wrapper">
              <div
                class="iconfont icon-weixin2"
                :class="active === 'weixin' ? 'bounceIn' : ''"
              ></div>
              微信支付
            </div>
            <div class="tip">微信快捷支付</div>
          </div>
          <div
            class="payItem acea-row row-middle"
            :class="active === 'yue' ? 'on' : ''"
            @click="payItem('yue')"
          >
            <div class="name acea-row row-center-wrapper">
              <div
                class="iconfont icon-icon-test"
                :class="active === 'yue' ? 'bounceIn' : ''"
              ></div>
              余额支付
            </div>
            <div class="tip">可用余额：{{ userInfo.now_money || 0 }}</div>
          </div>
          <div
            class="payItem acea-row row-middle"
            :class="active === 'offline' ? 'on' : ''"
            @click="payItem('offline')"
            v-if="offlinePayStatus === 1 && deduction === false"
          >
            <div class="name acea-row row-center-wrapper">
              <div
                class="iconfont icon-yinhangqia"
                :class="active === 'offline' ? 'bounceIn' : ''"
              ></div>
              线下支付
            </div>
            <div class="tip">线下方便支付</div>
          </div>
        </div>
      </div>
    </div>
    <div class="moneyList">
      <div
        class="item acea-row row-between-wrapper"
        v-if="orderPrice.total_price !== undefined"
      >
        <div>商品总价：</div>
        <div class="money">￥{{ orderPrice.total_price }}</div>
      </div>
      <div
        class="item acea-row row-between-wrapper"
        v-if="orderPrice.pay_postage > 0"
      >
        <div>运费：</div>
        <div class="money">￥{{ orderPrice.pay_postage }}</div>
      </div>
      <div
        class="item acea-row row-between-wrapper"
        v-if="orderPrice.coupon_price > 0"
      >
        <div>优惠券抵扣：</div>
        <div class="money">-￥{{ orderPrice.coupon_price }}</div>
      </div>
      <div
        class="item acea-row row-between-wrapper"
        v-if="orderPrice.deduction_price > 0"
      >
        <div>积分抵扣：</div>
        <div class="money">-￥{{ orderPrice.deduction_price }}</div>
      </div>
    </div>
    <div style="height:1.2rem"></div>
    <div class="footer acea-row row-between-wrapper">
      <div>
        合计:
        <span class="font-color-red">￥{{ orderPrice.pay_price }}</span>
      </div>
      <div class="settlement" @click="createOrder">立即结算</div>
    </div>
    <CouponListWindow
      v-on:couponchange="changecoupon($event)"
      v-model="showCoupon"
      :price="orderPrice.total_price"
      :checked="usableCoupon.id"
      @checked="changeCoupon"
    ></CouponListWindow>
    <AddressWindow
      @checked="changeAddress"
      @redirect="addressRedirect"
      v-model="showAddress"
      :checked="addressInfo.id"
      ref="mychild"
    ></AddressWindow>
  </div> -->
  <el-container>
    <el-header height="172px" style="padding:0">
      <HomeNavigation></HomeNavigation>
      <SearchBox></SearchBox>
      <ClassNavigation></ClassNavigation>
    </el-header>
    <el-main class="o-main">
      <div class="order" >
        <div class="adress">
          <div class="hd">收货信息</div>
          <div class="od acea-row">
            <div class="left">
              <div class="line1 acea-row"><span class="el-icon-location-information ico"></span> <div class="btn"><el-button @click="editAddress">编辑</el-button></div></div>
              <div class="line2 acea-row">收货人：<span>{{ addressInfo.real_name }}</span></div>
              <div class="line2 acea-row">联系方式：<span>{{ addressInfo.phone }}</span></div>
              <div class="line2 acea-row">收货地址：
                <span>{{ addressInfo.province }}{{ addressInfo.city}}{{ addressInfo.district }}{{ addressInfo.detail }}</span>
              </div>
            </div>
            <div class="right">
              <div class="link"  @click="addressTap">地址切换</div>
              <div class="btn acea-row row-center-wrapper"><el-button @click="goAddressPages">新建地址</el-button></div>
            </div>
          </div>
        </div>
        <div class="itemInfo">
          <OrderGoods :evaluate="0" :cartInfo="orderGroupInfo.cartInfo"></OrderGoods>
          <div class="row1 acea-row">
            <div class="r1"></div>
            <div class="r2">
              使用积分
              <div class="chkbox">
                <el-checkbox v-model="useIntegral"></el-checkbox>
                <span class="integral">可用积分： {{ userInfo.integral || 0 }}</span>
              </div>
            </div>
          </div>
          <div class="row2 acea-row row-right">
            <dvi class="right">
              <div class="pay1 acea-row row-right">
                <div class="p1 acea-row row-right ">商品合计:<span class="amount">￥{{ orderPrice.total_price }}</span></div>
                <div class="p2 acea-row row-right">运费:<span class="amount">￥{{ orderPrice.pay_postage }}</span></div>
                <!-- <div class="p3 acea-row row-right">活动优惠:<span class="amount">￥0</span></div> -->
                <div class="p4 acea-row row-right">应付总额:<span class="amount">￥{{ orderPrice.pay_price }}</span></div>
              </div>
            </dvi>
          </div>
            <div class="left">
              <div class="o-pay" >
                <div class="pay2">支付方式</div>
                <div class="pay3">
                  <el-radio-group @chang="payItem" v-model="active">  
                    <el-radio  label="weixin"  ><span   class="iconfont icon-weixin2">微信支付</span></el-radio>
                    <el-radio  label="yue" ><span class="iconfont icon-icon-test">余额支付</span></el-radio>
                    <!-- <el-radio  label="offline" ><span  class="iconfont icon-yinhangqia">线下支付</span></el-radio> -->
                  </el-radio-group>
                </div>
              </div>
          </div>
          <div class="btnPay acea-row row-right">
            <el-button @click="createOrder"><p>去付款</p></el-button>
          </div>
        </div>
      </div>
      <AddressWindow
      @checked="changeAddress"
      @redirect="addressRedirect"
      v-model="showAddress"
      :checked="addressInfo.id"
      ref="mychild"
    ></AddressWindow>
    </el-main>
    <el-footer style="padding: 0;">
      <Foot></Foot>
    </el-footer>
</el-container>
</template>
<style scoped>
  .o-main {
    background-color: #fff;
    padding: 50px;
  }
  .o-main .btnPay {
    width: 1088px;
    height: 90px;
    padding: 20px  20px;
  }
  .o-main .btnPay p {
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    font-size: 16px;
  }
  .o-main .order {
    width: 1090px;
    margin: 0 auto;
  }
  .o-main .o-pay {
    width: 1088px;
    border-top: 1px solid #e8e8e8;
    height: 104px;
    margin-bottom: 20px;
  }
  .o-main .o-pay .pay2 {
    height: 42px;
    background-color: #f4f4f4;
    color: #999;
    padding-left: 21px;
    font-size: 14px;
    line-height: 41px;
    text-align: left;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
  }
  .o-main .o-pay .pay3 {
    height: 59px;
    padding: 10px 0 19px 36px;
    background-color: #fff;
  }
  .o-main .o-pay .pay3 span {
    width: 134px;
    height: 30px;
    font-size: 28px;
  }
  .o-main .o-pay .pay3 .a1{
    width: 50px;
    height: 30px;
    border: 1px solid #666;
  }
  .o-main .order .adress {
    width: 1088px;
    height: 234px;
    margin-bottom: 20px;
    border: 1px solid #e8e8e8;
  }
  .o-main .order .adress .hd {
    width: 1088px;
    padding-left: 21px;
    height: 42px;
    background-color: #f5f5f5;
    line-height: 41px;
    color: #999;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    font-size: 14px;
  }
  .o-main .order .adress .od {
    width: 1088px;
    height: 190px;
    padding: 30px 0 30px 30px;
  }
  .o-main .order .adress .od .left {
   width: 805px;
   height: 130px;
  }
  .o-main .order .adress .od .left .line1 {
    height: 32px;
  }
  .o-main .order .adress .od .left .line1 .ico {
    width: 23px;
    height: 23px;
    font-size: 23px;
    color: #CC9756;;
  }
  .o-main .order .adress .od .left .line1 .btn {
    width: 60px;
    height: 28px;
    margin-left: 20px;
  }
  .o-main .btnPay>>>.el-button--small {
    padding: 7px 45px;
    color: #b4a078;
    border: 1px solid #b4a078;
    background-color: #f5f3ef;
  }
  .o-main .btnPay >>>.el-button--small:hover {
    background-color: #FFF;
  }
  .o-main .order .adress .od .left .line2 {
    font-size: 14px;
    height: 24px;
    margin-top: 10px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #999;
  }
  .o-main .order .adress .od .left .line2 span {
    color: #333;
  }
  .o-main .order .adress .od .right {
    width: 252px;
    height: 58px;
    margin-top: 44px;
    border-left: 1px solid  #e8e8e8;
  }
  .o-main .order .adress .od .right .link {
    height: 12px;
    margin-bottom: 16px;
    text-align: center;
    color: #69c;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    font-size: 12px;
  }
  .o-main .order .adress .od .right .btn {
    height: 28px;
    font-size: 14px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
  }
  .o-main .order .itemInfo{
    width: 1090px;
    border: 1px solid #e8e8e8;
  }
  .o-main .order .itemInfo .row1 {
    width: 1088px;
    height: 131px;
    padding: 20px 0;
    border-bottom: 1px solid #E8E8E8;
  }
  .o-main .order .itemInfo .row1 .r1 {
    width: 544.5px;
    height: 90px;
    padding: 5px 20px;
    border-right: 1px solid #E8E8E8;
  }
  .o-main .order .itemInfo .row1 .r2 {
    width: 543.5px;
    height: 90px;
    padding: 5px 20px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    font-size: 14px;
    color: #666;
    line-height: 1;
  }
  .o-main .order .itemInfo .row1 .r2 .chkbox {
    margin-top: 10px;
  }
  .o-main .order .itemInfo .row1 .r2 .chkbox .integral {
    padding-left: 10px;
    color: #333;
  }
  .o-main .order .itemInfo .row2 {
    width: 1088px;
    height: 190px;
    padding: 20px 40px 40px 30px;
    
  }
  .o-main .order .itemInfo .row2 .left {
    width: 115px;
    height: 276px;
  }
  .o-main .order .itemInfo .row2 .right {
    width: 280px;
    height: 150px;
  }
  .o-main .order .itemInfo .row2 .right .pay1 {
    width: 280px;
    height: 133px;
  }
  .o-main .order .itemInfo .row2 .right .pay1  .amount {
    width: 160px;
    height: 14px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 14px;
    text-align: right;
  }
  .o-main .order .itemInfo .row2 .right .pay1 .p1, .p2, .p3  {
    width: 280px;
    height: 14px;
    margin-bottom: 20px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 14px;
    text-align: right;
    line-height: 1;
  }

  .o-main .order .itemInfo .row2 .right .pay1 .p4 {
    width: 280px;
    height: 45px;
    padding-top: 24px;
    margin-bottom: 20px;
    border-top: 1px solid #e8e8e8;
    font-size: 14px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
  }
  .o-main .order .itemInfo .row2 .right .pay1 .p4 .amount {
    font-weight: 700;
    color: #d4282d;
    font-size: 20px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    width: 120px;
    line-height: 1;
    text-align: right;
  }
  .o-main .order .itemInfo .row2 .right .btn {
    width: 280px;
    height: 50px;
  }
  .o-main .order .itemInfo .row2 .right .btn p {
    padding: 6px 41px;
    font-size: 18px;
  }
</style>
<script>
import OrderGoods from "@components/OrderGoods";
import CouponListWindow from "@components/CouponListWindow";
import AddressWindow from "@components/AddressWindow";
import { postOrderConfirm, postOrderComputed, createOrder } from "@api/order";
import { getUser } from "@api/user";
import { pay } from "@libs/wechat";
import { isWeixin } from "@utils";
import HomeNavigation from "@components/HomeNavigation";
import ClassNavigation from "@components/ClassNavigation";
import SearchBox from "@components/SearchBox";
import Foot from "@components/Foot";

const NAME = "OrderSubmission",
  _isWeixin = isWeixin();
export default {
  name: NAME,
  components: {
    OrderGoods,
    CouponListWindow,
    AddressWindow,
    HomeNavigation,
    ClassNavigation,
    SearchBox,
    Foot
  },
  props: {},
  data: function() {
    return {
      offlinePayStatus: 2,
      from: _isWeixin ? "weixin" : "weixinh5",
      deduction: true,
      isWeixin: _isWeixin,
      pinkId: 0,
      active: _isWeixin ? "weixin" : "yue",
      showCoupon: false,
      showAddress: false,
      addressInfo: {},
      couponId: 0,
      orderGroupInfo: {
        priceGroup: {}
      },
      usableCoupon: {},
      addressLoaded: false,
      useIntegral: false,
      orderPrice: {
        pay_price: "计算中"
      },
      mark: "",
      radio:true,
      system_store: {},
      shipping_type: 0,
      contacts: "",
      contactsTel: "",
      store_self_mention: 0,
      userInfo: {}
    };
  },
  watch: {
    useIntegral() {
      this.computedPrice();
    },
    $route(n) {
      if (n.name === NAME) {
        this.getUserInfo();
        this.getCartInfo();
      }
    },
    shipping_type() {
      this.computedPrice();
    }
  },
  mounted: function() {
    console.log("active"+this.active)
    let that = this;
    that.getUserInfo();
    that.getCartInfo();
    if (that.$route.query.pinkid !== undefined)
      that.pinkId = that.$route.query.pinkid;
  },
  methods: {
    getUserInfo() {
      getUser()
        .then(res => {
          this.userInfo = res.data;
        })
        .catch(() => {});
    },
     /**
     * 编辑地址
     */
     editAddress: function(index) {
      this.$router.push({
        path: "/user/add_address/" + this.addressInfo.id
      });
    },
    goAddressPages: function() {
      this.$router.push({ path: "/user/add_address" });
    },
    addressType: function(index) {
      if (index && !this.system_store.id)
        return this.$dialog.error("暂无门店信息，您无法选择到店自提！");
      this.shipping_type = index;
    },
    computedPrice() {
      let shipping_type = this.shipping_type;
      postOrderComputed(this.orderGroupInfo.orderKey, {
        addressId: this.addressInfo.id,
        useIntegral: this.useIntegral ? 1 : 0,
        couponId: this.usableCoupon.id || 0,
        shipping_type: parseInt(shipping_type) + 1
      }).then(res => {
        const data = res.data;
        if (data.status === "EXTEND_ORDER") {
          this.$router.replace({
            path: "/order/detail/" + data.result.orderId
          });
        } else {
          this.orderPrice = data.result;
        }
      });
    },
    getCartInfo() {
      const cartIds = this.$route.params.id;
      if (!cartIds) {
        this.$dialog.error("参数有误");
        return this.$router.go(-1);
      }
      postOrderConfirm(cartIds)
        .then(res => {
          this.offlinePayStatus = res.data.offline_pay_status;
          this.orderGroupInfo = res.data;
          this.deduction = res.data.deduction;
          this.usableCoupon = res.data.usableCoupon || {};
          this.addressInfo = res.data.addressInfo || {};
          this.system_store = res.data.system_store || {};
          this.store_self_mention = res.data.store_self_mention;
          this.computedPrice();
        })
        .catch(() => {
          this.$dialog.error("加载订单数据失败");
        });
    },
    addressTap: function() {
      this.showAddress = true;
      if (!this.addressLoaded) {
        this.addressLoaded = true;
        this.$refs.mychild.getAddressList();
      }
    },
    addressRedirect() {
      this.addressLoaded = false;
      this.showAddress = false;
    },
    couponTap: function() {
      this.showCoupon = true;
    },
    changeCoupon: function(coupon) {
      if (!coupon) {
        this.usableCoupon = { coupon_title: "不使用优惠券", id: 0 };
      } else {
        this.usableCoupon = coupon;
      }
      this.computedPrice();
    },
    payItem: function(index) {
      this.active = index;
      console.log("payItem:"+this.active)
    },
    changeAddress(addressInfo) {
      this.addressInfo = addressInfo;
    },
    createOrder() {
      let shipping_type = this.shipping_type;
      if (!this.active) return this.$dialog.toast({ mes: "请选择支付方式" });
      if (!this.addressInfo.id && !this.shipping_type)
        return this.$dialog.toast({ mes: "请选择收货地址" });
      if (this.shipping_type) {
        if (
          (this.contacts === "" || this.contactsTel === "") &&
          this.shipping_type
        )
          return this.$dialog.toast({ mes: "请填写联系人或联系人电话" });
        if (!/^1(3|4|5|7|8|9|6)\d{9}$/.test(this.contactsTel)) {
          return this.$dialog.toast({ mes: "请填写正确的手机号" });
        }
        if (!/^[\u4e00-\u9fa5\w]{2,16}$/.test(this.contacts)) {
          return this.$dialog.toast({ mes: "请填写您的真实姓名" });
        }
      }
      this.$dialog.loading.open("生成订单中");
      createOrder(this.orderGroupInfo.orderKey, {
        real_name: this.contacts,
        phone: this.contactsTel,
        addressId: this.addressInfo.id,
        useIntegral: this.useIntegral ? 1 : 0,
        couponId: this.usableCoupon.id || 0,
        payType: this.active,
        pinkId: this.pinkId,
        seckill_id: this.orderGroupInfo.seckill_id,
        combinationId: this.orderGroupInfo.combination_id,
        bargainId: this.orderGroupInfo.bargain_id,
        from: this.from,
        mark: this.mark || "",
        shipping_type: parseInt(shipping_type) + 1
      })
        .then(res => {
          this.$dialog.loading.close();
          const data = res.data;
          let url = "/order/status/" + data.result.orderId;
          switch (data.status) {
            case "ORDER_EXIST":
            case "EXTEND_ORDER":
            case "PAY_DEFICIENCY":
            case "PAY_ERROR":
              this.$dialog.toast({ mes: res.msg });
              this.$router.replace({
                path: url + "/0?msg=" + res.msg
              });
              break;
            case "SUCCESS":
              this.$dialog.success(res.msg);
              this.$router.replace({
                path: url + "/1"
              });
              break;
            case "WECHAT_H5_PAY":
              this.$router.replace({
                path: url + "/2"
              });
              setTimeout(() => {
                location.href = data.result.jsConfig.mweb_url;
              }, 100);
              break;
            case "WECHAT_PAY":
              pay(data.result.jsConfig).finally(() => {
                this.$router.replace({
                  path: url + "/4"
                });
              });
          }
        })
        .catch(err => {
          console.log(err);
          this.$dialog.loading.close();
          this.$dialog.error(err.msg || "创建订单失败");
        });
    }
  }
};
</script>
